<script setup lang="ts">
import Toolbar from './components/tools-bar/ToolsBar.vue'
import AddonBar from './components/AddonBar.vue'
import AttrBar from './components/attr-bar/AttrBar.vue'
import StateBar from './components/StateBar.vue'
import { getTeleport } from '@antv/x6-vue-shape'
import { Graph } from '@antv/x6'
import '../shapes'
import { eventBus, initGraph } from './utils'
import { useYkEditorDrawStore } from './store'
import { ObjectUtil } from '@utils/object-util'

const props = defineProps<{
  jsonData: string | Record<string, any>
}>()
const flowContainerRef = ref<HTMLDivElement>()
const store = useYkEditorDrawStore()

const emits = defineEmits(['save'])

onMounted(() => {
  init()
  onSave()
})

onBeforeUnmount(() => {
  offSave()
  graph.value.dispose()
})

// 画布实例
const graph = shallowRef<Graph>()
const TeleportContainer = getTeleport()
function init () {
  const container = flowContainerRef.value
  let json = { size: { width: 800, height: 600 } }
  if (props.jsonData) {
    if (ObjectUtil.isString(props.jsonData)) {
      json = JSON.parse(props.jsonData)
    } else {
      json = props.jsonData as any
    }
  }
  graph.value = initGraph({ options: { container }, json })
  store.graph = graph.value
  store.size = json.size
}

// 监听保存
function onSave () {
  eventBus.on('saveGraph', (json: any) => {
    localStorage.setItem('_json_2', JSON.stringify(json))
    emits('save', json)
  })
}
function offSave () {
  eventBus.off('saveGraph')
}
</script>

<template>
  <div class="yk-editor-draw">
    <!--工具栏-->
    <toolbar />
    <div class="flex-1 overflow-hidden d-flex">
      <!--插件栏/组件栏-->
      <addon-bar />
      <div class=" flex-1 d-flex flex-column overflow-hidden">
        <!--绘图区域-->
        <div class="flex-1 overflow-hidden d-flex">
          <div ref="flowContainerRef" class="flow-container disable-event" />
          <TeleportContainer />
        </div>
        <!--状态栏-->
        <state-bar />
      </div>
      <!--属性栏-->
      <attr-bar />
    </div>
  </div>
</template>

<style lang="scss">
@import "../style";
</style>
<style scoped lang="scss">
.yk-editor-draw {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.flow-container {
  outline: 1px solid #333333;
  background-size: 100% 100%;
  overflow: visible;
}

.flow-container:deep {
  // 控制选框
  --selection-box-edge--pointer-events: auto;
  .x6-widget-selection-box-edge {
    pointer-events: var(--selection-box-edge--pointer-events) !important;
  }
  &.disable-event {
    .disable-event--pointer-events {
      pointer-events: none !important;
    }
  }

  // 连接桩
  &.hide-port {
    .x6-port {
      display: none;
    }
  }
  .x6-node [magnet='true'] {
    transition: none;
  }
}

.yk-editor-draw:deep {
  // scroller插件
  .x6-graph-scroller {
    width: 100% !important;
    height: 100% !important;
  }

  // 允许溢出画布
  .x6-graph-svg {
    overflow: inherit;
  }

  // 选中时的边框样式
  .x6-widget-selection-box, .x6-widget-selection-inner {
    box-shadow: unset;
    border: 2px dashed var(--el-color-primary);
  }
}

</style>
